<template>
  <div :class="[stripContainerClass]">
    <div class="label">{{ label }}:</div>
    <div :class="[screenListClass]">
      <div
        v-if="templateList.length > 9"
        :class="[floatIconClass]"
        @click="isOpen = !isOpen"
      >
        <span> {{ isOpenText.text }}</span>
        <!-- <i class="el-icon-delete"></i> -->

        <i :class="['el-icon-arrow-up', isOpenText.iconName]"></i>
      </div>
      <div
        v-for="item in templateList"
        :key="item.dictValue"
        :class="isActive(item)"
        @click="handleClik(item)"
      >
        {{ item.dictLabel }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeadScreenStrip',
  props: {
    label: {
      type: String,
      default: '研究领域',
    },
    screenList: {
      type: Array,
      default: () => [
        {
          dictLabel: 'demo',
          dictValue: '0',
        },
      ],
    },
  },
  computed: {
    templateList() {
      let tempList = [
        { dictLabel: '全部', dictValue: undefined, id: undefined },
      ]
      let resList = tempList.concat(this.screenList)
      return resList
    },
    stripContainerClass() {
      return this.isOpen ? 'strip-container-active' : 'strip-container'
    },
    floatIconClass() {
      // return this.isOpen ? 'float-icon-active' : 'float-icon'
      return 'float-icon'
    },
    screenListClass() {
      return this.isOpen ? 'list-active' : 'list'
    },
    isOpenText() {
      if (this.isOpen) {
        return { text: '收起', iconName: 'arrow-up' }
      }
      return { text: '展开', iconName: 'arrow-down' }
    },
    isActive() {
      return (item) => {
        if (
          item.dictValue == this.activeId ||
          (!item.dictValue == undefined && !this.activeId == undefined)
        ) {
          return 'activeClass'
        }
        return 'normalClass'
      }
    },
  },
  data() {
    return {
      isOpen: false,

      activeId: undefined,
      // templateList: [
      //   { label: '全部', id: undefined },
      //   { label: '生物医药', id: 0 },
      //   { label: '生物医药1', id: 1 },
      //   { label: '生物医药2', id: 2 },
      //   { label: '生物医药3', id: 3 },
      //   { label: '生物医药4', id: 4 },
      //   { label: '生物医药5', id: 5 },
      //   { label: '生物医药6', id: 6 },
      //   { label: '生物医药7', id: 7 },
      //   { label: '生物医药8', id: 8 },
      //   { label: '生物医药9', id: 9 },
      //   { label: '生物医药10', id: 10 },
      // ],
      list: [{}],
    }
  },
  methods: {
    handleClik(item) {
      if (item.dictValue == undefined) {
        this.activeId = undefined
        this.$emit('itemClick', { dictValue: undefined })
        return
      }
      let isCanSelect =
        (item.dictValue || item.dictValue == 0) &&
        item.dictValue !== this.activeId
      if (isCanSelect) {
        this.activeId = item.dictValue
        this.$emit('itemClick', item)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.strip-container {
  height: 5rem;
}
.strip-container-active {
  height: auto;
}
.strip-container,
.strip-container-active {
  position: relative;
  display: flex;
  width: 1200px;
  padding: 1rem;
  padding-bottom: 0;
  padding-right: 6rem;
  font-size: 18px;

  .float-icon,
  .float-icon-active {
    position: absolute;
    right: 0;
    top: 1rem;
    display: flex;
    align-items: center;
    width: 6rem;
    height: 3rem;
    padding: 20px;
    color: #409eff;
    cursor: pointer;
    transition: 200ms ease all;

    span {
      min-width: 3rem;
    }
    i {
      color: #409eff;
    }
  }
  .float-icon-active {
    top: 4rem;
  }
  .arrow-up {
    transition: 300ms ease all;
  }
  .arrow-down {
    transition: 300ms ease all;
    transform: rotate(-180deg);
  }
  .label {
    min-width: 6rem;
    font-weight: bold;
  }
  .list {
    height: 3rem;
  }
  .list-active {
    height: auto;
  }
  .list,
  .list-active {
    flex-grow: 1;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    overflow: hidden;
    transition: 100ms ease all;

    .activeClass,
    .normalClass {
      height: 2.2rem;
      line-height: 2.2rem;
      min-width: 8rem;
      text-align: center;
      padding-left: 1.5rem;
      margin-bottom: 0.5rem;
      cursor: pointer;
    }
    .activeClass {
      font-weight: bold;
      color: #409eff;
    }
  }
}
</style>
